<template>
    <div class="app-container">
        <el-card shadow="always">
            <div>
                <div class="flex justify-between align-center">
                    <div>
                        <span style="color:#fd2f2f;">对应美国时区:(-7)：{{ us_time | parseTime('y-m-d h:i:s 星期a') }}</span>
                        <span style="color:#fd2f2f;">|    对应欧洲时区:(+2)：{{ eur_time | parseTime('y-m-d h:i:s 星期a') }}</span>
                        <el-radio-group @change="day_change" v-model="saleSearch.dateType" size="small" class="mr5">
                            <el-radio-button :label="0">今天</el-radio-button>
                            <el-radio-button :label="1">昨天</el-radio-button>
                            <el-radio-button :label="2">最近7天</el-radio-button>
                            <el-radio-button :label="3">本月</el-radio-button>
                        </el-radio-group>
                        <el-date-picker v-model="saleSearch.datetime" type="daterange" :picker-options="pickerOptions" range-separator="至" size="small" start-placeholder="开始日期" end-placeholder="结束日期" unlink-panels />
                        <el-button @click="searchs" type="primary">搜索</el-button>
                        <apsn>(搜索按美国时区)</apsn>
                            <el-badge :value="0" :max="5" style="margin:0 20px 0 10px;">
                                    <el-button type="danger" >
                                        <router-link
                                                :to="{
                                                    path: '../finance/cost/apierrorlog_index',
                                                }"
                                            >
                                            接口异常
                                        </router-link>
                                    </el-button>
                                </el-badge>

                                <el-badge value="new" type="warning">
                                    <el-button type="warning" >
                                        <router-link
                                                :to="{
                                                    path: '../finance/cost/querypurchaselast_index',
                                                }"
                                            >
                                            预估采购
                                        </router-link>
                                    </el-button>
                                </el-badge>
                    </div>
                </div>
            </div>
        </el-card>
        
        <!-- <el-row :gutter="20">
            <el-col :span="16"> -->
                <!-- 布局 -->
                <el-card shadow="always" style="margin-top:10px;" body-style="padding:10px 20px;" v-loading="loading">
                        <el-row>
                                <div>运营业绩（半个小时延迟）</div>
                                <el-divider class="mt5 mb5" />

                                <el-tabs type="border-card">
                                    <el-tab-pane label="所有">
                                        <template>
                                            <el-table
                                            :data="shopify_sales_day"
                                            max-height="500"
                                            border
                                            :summary-method="getSummaries"
                                            show-summary
                                            :row-class-name="tableRowClassName"
                                            :cell-style="columnStyle"
                                            :default-sort = "{prop: 'date', order: 'descending'}"
                                            style="width: 100%">
                                                    <el-table-column
                                                        prop="name"
                                                        label="运营"
                                                        width="">
                                                    </el-table-column>
                                                    <el-table-column
                                                        prop="total"
                                                        sortable
                                                        label="总销售额$"
                                                        width="">
                                                    </el-table-column>
                                                    <el-table-column
                                                        prop="count"
                                                        sortable
                                                        label="订单量">
                                                    </el-table-column>
                                                    <el-table-column
                                                        prop="profit"
                                                        sortable
                                                        label="预计毛利$">
                                                    </el-table-column>
                                                    <el-table-column
                                                        prop="advcost"
                                                        sortable
                                                        label="广告$">
                                                    </el-table-column>
                                                    <el-table-column
                                                        prop="roi"
                                                        label="ROI">
                                                    </el-table-column>
                                                    <el-table-column
                                                        prop="remarks"
                                                        :show-overflow-tooltip="true"
                                                        label="备注">
                                                    </el-table-column>
                                            </el-table>
                                        </template>
                                    </el-tab-pane>
                                    <el-tab-pane label="武汉">
                                        <template>
                                            <el-table
                                            :data="shopify_sales_day_wh"
                                            max-height="500"
                                            border
                                            :summary-method="getSummaries"
                                            show-summary
                                            :row-class-name="tableRowClassName"
                                            :cell-style="columnStyle"
                                            :default-sort = "{prop: 'date', order: 'descending'}"
                                            style="width: 100%">
                                                    <el-table-column
                                                        prop="name"
                                                        label="运营"
                                                        width="">
                                                    </el-table-column>
                                                    <el-table-column
                                                        prop="total"
                                                        sortable
                                                        label="总销售额$"
                                                        width="">
                                                    </el-table-column>
                                                    <el-table-column
                                                        prop="count"
                                                        sortable
                                                        label="订单量">
                                                    </el-table-column>
                                                    <el-table-column
                                                        prop="profit"
                                                        sortable
                                                        label="预计毛利$">
                                                    </el-table-column>
                                                    <el-table-column
                                                        prop="advcost"
                                                        sortable
                                                        label="广告$">
                                                    </el-table-column>
                                                    <el-table-column
                                                        prop="roi"
                                                        label="ROI">
                                                    </el-table-column>
                                                    <el-table-column
                                                        prop="remarks"
                                                        :show-overflow-tooltip="true"
                                                        label="备注">
                                                    </el-table-column>
                                            </el-table>
                                        </template>
                                    </el-tab-pane>
                                    <el-tab-pane label="南昌">
                                        <template>
                                            <el-table
                                            :data="shopify_sales_day_nc"
                                            max-height="500"
                                            border
                                            :summary-method="getSummaries"
                                            show-summary
                                            :row-class-name="tableRowClassName"
                                            :cell-style="columnStyle"
                                            :default-sort = "{prop: 'date', order: 'descending'}"
                                            style="width: 100%">
                                                    <el-table-column
                                                        prop="name"
                                                        label="运营"
                                                        width="">
                                                    </el-table-column>
                                                    <el-table-column
                                                        prop="total"
                                                        sortable
                                                        label="总销售额$"
                                                        width="">
                                                    </el-table-column>
                                                    <el-table-column
                                                        prop="count"
                                                        sortable
                                                        label="订单量">
                                                    </el-table-column>
                                                    <el-table-column
                                                        prop="profit"
                                                        sortable
                                                        label="预计毛利$">
                                                    </el-table-column>
                                                    <el-table-column
                                                        prop="advcost"
                                                        sortable
                                                        label="广告$">
                                                    </el-table-column>
                                                    <el-table-column
                                                        prop="roi"
                                                        label="ROI">
                                                    </el-table-column>
                                                    <el-table-column
                                                        prop="remarks"
                                                        :show-overflow-tooltip="true"
                                                        label="备注">
                                                    </el-table-column>
                                            </el-table>
                                        </template>
                                    </el-tab-pane>
                                    <el-tab-pane label="银川">
                                        <template>
                                            <el-table
                                            :data="shopify_sales_day_yc"
                                            max-height="500"
                                            border
                                            :summary-method="getSummaries"
                                            show-summary
                                            :row-class-name="tableRowClassName"
                                            :cell-style="columnStyle"
                                            :default-sort = "{prop: 'date', order: 'descending'}"
                                            style="width: 100%">
                                                    <el-table-column
                                                        prop="name"
                                                        label="运营"
                                                        width="">
                                                    </el-table-column>
                                                    <el-table-column
                                                        prop="total"
                                                        sortable
                                                        label="总销售额$"
                                                        width="">
                                                    </el-table-column>
                                                    <el-table-column
                                                        prop="count"
                                                        sortable
                                                        label="订单量">
                                                    </el-table-column>
                                                    <el-table-column
                                                        prop="profit"
                                                        sortable
                                                        label="预计毛利$">
                                                    </el-table-column>
                                                    <el-table-column
                                                        prop="advcost"
                                                        sortable
                                                        label="广告$">
                                                    </el-table-column>
                                                    <el-table-column
                                                        prop="roi"
                                                        label="ROI">
                                                    </el-table-column>
                                                    <el-table-column
                                                        prop="remarks"
                                                        :show-overflow-tooltip="true"
                                                        label="备注">
                                                    </el-table-column>
                                            </el-table>
                                        </template>
                                    </el-tab-pane>
                                </el-tabs>
                        </el-row>
                    </el-card>
            <!-- </el-col>
            <el-col :span="8"> -->
                    <!-- 布局 -->
                        <el-card shadow="always" style="margin-top:10px;" body-style="padding:10px 20px;" v-loading="loading">
                                <el-row>
                                        <div>SKU排行</div>
                                        <el-divider class="mt5 mb5" />
                                        <template>
                                            <qa-table
                                                    :source="count_brandlists"
                                                    :columns="columns"
                                                    :selection="true"
                                                    :loading="loading"
                                                    id="quickadmin"
                                                >
                                                    <template v-slot:action>
                                                        <el-table-column label="操作" width="">
                                                            <template slot-scope="scope">
                                                                <el-button size="mini" type="info" @click="handleDetail(scope.row)" v-hasPermi="api.find">详情</el-button>
                                                            </template>
                                                        </el-table-column>
                                                    </template>
                                                </qa-table>
                                        </template>
                                        <!-- <el-button @click="continue_loading" type="primary">继续加载</el-button> -->
                                </el-row>
                            </el-card>
            <!-- </el-col> -->
        <!-- </el-row> -->
        <!-- 编辑弹窗 -->
        <el-dialog :title="!disabled ? '编辑' : '详情'" :visible="editOpen"  :before-close="beforeClose" destroy-on-close>
            <EditForm ref="editForm" :findFormData="findFormData"  :disabled="disabled" @submitForm="submitForm" :editFormParams="editFormParams" @editFormCancel="beforeClose" />
        </el-dialog>
        
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { curdMixin } from '@/mixins/curdMixin'
import EditForm from './EditFormCom'
export default {
    name: 'Index',
    mixins: [curdMixin],
    components: { EditForm },
    data() {
        return {
            editFormParams: {
            },
            columns: [
                { visible: true, label: '编号', prop: 'brand' },
                {
                    visible: true,
                    label: '图片',
                    prop: 'images',
                    component: 'QuickAdminImage',
                },
                { visible: true, label: '最新成本￥', prop: 'material' },
                { visible: true, label: '数量', prop: 'count' },
            ],
            platform_tabel: [{
                Google: '0',
                TikTok: '0',
                Facebook: '0',
                bing: '0',
                snapchat: '0',
            }],

            loading: false,
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7 - 3600 * 1000 * 15);
                    end.setTime(end.getTime() - 3600 * 1000 * 15);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30 - 3600 * 1000 * 15);
                    end.setTime(end.getTime() - 3600 * 1000 * 15);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90 - 3600 * 1000 * 15);
                    end.setTime(end.getTime() - 3600 * 1000 * 15);
                    picker.$emit('pick', [start, end]);
                    }
                }]
            },
            saleSearch: {
                dateType: 0,
                datetime: '',
            },
            time: 0,
            start_time: new Date(),
            end_time: new Date(),
            us_time: 0,
            eur_time: 0,

            paid:0,
            purchase:0,//采购成本
            logistics:0,//物流成本
            gross_profit:0,//毛利
            platform_consumption:'',
            refund:0,
            refund_money:0,
            dispute:0,
            sales:0,
            sales_eur:0,
            sales_usd:0,
            adv_cost:0,
            roi:0,
            day_changes:0,
            shopify_sales:[],
            shopify_sales_day:[],
            shopify_sales_day_wh:[],
            shopify_sales_day_nc:[],
            shopify_sales_day_yc:[],
            count_brandlists:[],
            findFormData:[],
            api: {
                find: `/admin/todaycount/find`,
            },
        }
    },
    computed: {
        ...mapGetters(['avatar', 'name', 'groups_name']),
    },
    created() {
        this.now()
        this.day_change(0);
    },
    methods: {
        // 编辑
        handleDetail(row) {
            this.handleFind(row)
        },
        // 编辑回显
        async handleFind(row) {
            let response = await this.request.post(this.api.find, { 
                brand: row.brand  ,
                // start_time: this.start_time,
                // end_time: this.end_time,
            })
            this.findFormData = this.formatFindData(response.data)
            console.log('tthis.findFormDataest',this.findFormData);
            
            this.editOpen = true
        },
        // 北京时间
        now() {
            this.us_time = new Date().getTime() - 15 * 3600 * 1000;
            setInterval(() => {
                this.us_time = new Date().getTime() - 15 * 3600 * 1000;
            }, 1000)
            this.eur_time = new Date().getTime() - 6 * 3600 * 1000;
            setInterval(() => {
                this.eur_time = new Date().getTime() - 6 * 3600 * 1000;
            }, 1000)
        },
        day_change(val) {
            this.saleSearch.datetime = '';
            let start_time2 = new Date();
            if(val == 0){
                this.start_time.setTime(start_time2.getTime() - 15 * 3600 * 1000);
                this.end_time.setTime(start_time2.getTime() + 9 * 3600 * 1000);
            }else if(val == 1){
                this.start_time.setTime(start_time2.getTime() - 3600 * 1000 * 24 - 15 * 3600 * 1000);
                this.end_time.setTime(start_time2.getTime() - 15 * 3600 * 1000);
            }else if(val == 2){
                this.start_time.setTime(start_time2.getTime() - 3600 * 1000 * 24 * 7 - 15 * 3600 * 1000);
                this.end_time.setTime(start_time2.getTime() - 15 * 3600 * 1000);
            }else if(val == 3){
                this.start_time.setTime(start_time2.getTime() - 15 * 3600 * 1000);
                this.end_time.setTime(start_time2.getTime() - 15 * 3600 * 1000);
            }
            this.day_changes = val;
            this.handleSkuFind();
            this.count_brandlist();
        },
        searchs() {
            this.saleSearch.dateType = -1;
            this.day_changes = 101;
            if(this.saleSearch.datetime == undefined || this.saleSearch.datetime == null || this.saleSearch.datetime == ''){
                this.$message.error('请筛选时间');
                return false;
            }else{
                this.start_time = this.saleSearch.datetime[0]
                this.end_time = this.saleSearch.datetime[1]
            }
            this.handleSkuFind();
            this.count_brandlist();
        },
        continue_loading() {
            
            this.count_brandlist();
        },

        // sku生成回显
        async handleSkuFind() {
            if(this.start_time == undefined || this.end_time == undefined){
                let start_time2 = new Date()
                start_time2.setTime(start_time2.getTime() - 3600 * 1000 * 24 * 1);
                this.start_time = start_time2;
                this.end_time = new Date();
            }
            let start_time = Date.parse(new Date(this.start_time));
            let end_time = Date.parse(new Date(this.end_time));
            start_time = Math.round(start_time)/1000;
            end_time = Math.round(end_time)/1000;
            this.loading = true;
            let response = await this.request.post('/admin/index/dashboard_personal', { 
                day_changes : this.day_changes,
                start_time : start_time,
                end_time : end_time
            })
            this.loading = false;
            this.paid = response.data.paid;
            this.purchase = response.data.purchase,//采购成本
            this.logistics = response.data.logistics,//物流成本
            this.gross_profit = response.data.gross_profit,//毛利
            this.refund = response.data.refund;
            this.dispute = response.data.dispute;
            this.refund_money = response.data.refund_money;
            this.adv_cost = response.data.adv_cost;
            this.roi = response.data.roi;
            this.sales = response.data.sales;
            this.sales_eur = response.data.sales_eur;
            this.sales_usd = response.data.sales_usd;
            this.shopify_sales = response.data.shopify_sales;
            this.shopify_sales_day = response.data.shopify_sales_day;
            this.shopify_sales_day_wh = response.data.shopify_sales_day_wh;
            this.shopify_sales_day_nc = response.data.shopify_sales_day_nc;
            this.shopify_sales_day_yc = response.data.shopify_sales_day_yc;
            // this.platform_consumption = response.data.platform_consumption;
            
            this.platform_tabel[0].Google = 0;
            this.platform_tabel[0].TikTok = 0;
            this.platform_tabel[0].Facebook = 0;
            this.platform_tabel[0].bing = 0;
            this.platform_tabel[0].snapchat = 0;
            
            if(response.data.platform_consumption.Google > 0){
                this.platform_tabel[0].Google = response.data.platform_consumption.Google;
            }
            if(response.data.platform_consumption.TikTok > 0){
                this.platform_tabel[0].TikTok = response.data.platform_consumption.TikTok;
            }
            if(response.data.platform_consumption.bing > 0){
                this.platform_tabel[0].bing = response.data.platform_consumption.bing;
            }
            if(response.data.platform_consumption.Facebook > 0){
                this.platform_tabel[0].Facebook = response.data.platform_consumption.Facebook;
            }
            if(response.data.platform_consumption.snapchat > 0){
                this.platform_tabel[0].snapchat = response.data.platform_consumption.snapchat;
            }
        },
        
        // sku生成回显
        async count_brandlist() {
            if(this.start_time == undefined || this.end_time == undefined){
                let start_time2 = new Date()
                start_time2.setTime(start_time2.getTime() - 3600 * 1000 * 24 * 1);
                this.start_time = start_time2;
                this.end_time = new Date();
            }
            let start_time = Date.parse(new Date(this.start_time));
            let end_time = Date.parse(new Date(this.end_time));
            start_time = Math.round(start_time)/1000;
            end_time = Math.round(end_time)/1000;
            this.loading = true;
            let response = await this.request.get('/admin/todaycount/index', { params: { 
                    day_changes : this.day_changes,
                    start_time_new : start_time,
                    end_time_new : end_time
                }
            })
            this.count_brandlists = response.data;
        },

        getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = '统计';
                    return;
                }
                const values = data.map(item => Number(item[column.property]));
                if (!values.every(value => isNaN(value))) {
                    sums[index] = values.reduce((prev, curr) => {
                    const value = Number(curr);
                    if (!isNaN(value)) {
                        return prev + curr;
                    } else {
                        return prev;
                    }
                    }, 0);
                    if(index == 5 || index == 6){
                        sums[index] = '';
                    }else{
                        if(index !== 2){
                            sums[index] = sums[index].toFixed(2);
                        }
                    }
                } else {
                    sums[index] = 'N/A';
                }
            });
            return sums;
        },
        // 表格列背景色
        columnStyle({ row, column, rowIndex, columnIndex }) {
            if (columnIndex == 0) {
                return "background:	#f5f7fa;font-weight: bold;";
            }
        },
        // 表格行背景色
        tableRowClassName({ row, rowIndex }) {
            return "background:	#ffffff;";
        },
    },
}
</script>

<style lang="scss" scoped>
.el-table__footer-wrapper tbody td{
        font-weight: 600;
        color: #0055ff;
        background-color: #85b0f2;
    }
.app-container {
    background: #f0f2f5;
    .title-tip {
        color: #909399;
        margin: 0;
        display: block;
    }
    /* 统计卡片 */
    .chart-card {
        color: #606266;
        margin-bottom: 15px;
    }
    .chart-card-num {
        font-size: 30px;
    }

    .chart-card-content {
        height: 50px;
        box-sizing: border-box;
        margin-bottom: 12px;
        font-size: 13px;
    }

    .chart-card-text {
        font-size: 13px;
    }
}
</style>
